<!--
 * @Author: Rain
 * @Date: 2023/09/26 16:43:34
 * @LastEditTime: 2023/12/05 22:13:07
 * @Description: Do Something
-->
<template>
  <div class="w-full flex flex-col">
    <div class="w-full flex items-center">
      <div
        v-if="!!filePath"
        class="flex justify-center relative mr-20 w-88 h-88 border border-solid border-gray-300"
      >
        <video v-if="type==='video'" class="avatar w-full h-full" :src="filePath" />
        <audio v-if="type ==='audio'" class="avatar w-full h-full" :src="filePath" />
        <iframe v-if="type === 'pdf'" :src="filePath" frameborder="0" width="100%" height="100%" class="w-full h-full" />
        <i
          class="el-icon-circle-close cursor-pointer absolute top-0 right-0"
          @click="deleteFile"
        />
      </div>
      <el-upload
        ref="uploadFile"
        class="avatar-uploader w-88 h-88"
        :auto-upload="false"
        action=""
        :show-file-list="false"
        :http-request="handleUpload"
        :on-change="beforeAvatarUpload"
        :accept="accept"
        :limit="1"
      >
        <i class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>
    <div v-if="type === 'video' || type === 'audio'" slot="tip" class="el-upload__tip">
      只能上传{{ type === 'audio' ? "音频" :"视频" }}文件,且不超过100M
    </div>
  </div>
</template>

<script>
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
export default {
  props: {
    src: {
      type: String,
      default: () => ''
    },
    type: {
      type: String,
      default: () => 'media'
    }
  },
  data() {
    return {
      file: null,
      filePath: '',
      fileType: '',
      accept: ''
    }
  },
  computed: {
    isVideo() {
      return this.fileType.startsWith('video')
    },
    ...mapGetters(['fileUploadApi'])
  },
  watch: {
    src(newVal) {
      this.filePath = newVal
    },
    type: {
      handler(newVal) {
        this.accept = newVal === 'video' ? 'video/*' : newVal === 'audio' ? 'audio/*' : newVal === 'pdf' ? '.pdf' : newVal === 'media' ? 'video/*,image/*' : '.xlsx,.xls'
      },
      immediate: true
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.$message.error('上传附件大小不能超过100MB!')
      }
      this.file = file.raw
      this.filePath = URL.createObjectURL(file.raw)
      const { type } = this.file
      this.fileType = type
      if (this.type === 'video' || this.type === 'audio') {
        const audioElement = new Audio(this.filePath)
        // ios无法触发loadedmetadata，所以要静音播放
        audioElement.muted = true
        audioElement.play().then(() => audioElement.pause())
        audioElement.addEventListener('loadedmetadata', async(_event) => {
          const seconds = parseInt(audioElement.duration)
          this.$emit('updateTime', seconds)
          this.$emit('upload', this.filePath)
        })
      } else {
        this.$emit('upload', this.filePath)
      }
    },
    async handleUpload() {
      if (this.file) {
        return await upload(this.fileUploadApi, this.file, { name: this.file.name })
          .then((result) => {
            const {
              data: { path }
            } = result
            this.filePath = path.replace('/home/eladmin/', '/')
            this.file = null
            return this.filePath
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    deleteFile() {
      this.filePath = ''
      this.fileType = ''
      this.$refs.uploadFile.clearFiles()
      this.$emit('upload', this.filePath)
      this.$emit('updateTime', 0)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
.el-upload__tip {
  font-size: 12px;
  color: #409eff;
}
video {
  object-fit: cover;
}
</style>
